<template>

 <div>
  <div >
    <el-carousel trigger="click" height="400px">
      <el-carousel-item >
        <img :src="require('@/assets/down.jpeg')">
        <img :src="require('@/assets/down.png')">
<!--        <el-carousel-item v-for="item in myImage" :key="item">-->
<!--          <el-image src="item" style="width: 100%;height: 100%"></el-image>-->
<!--        </el-carousel-item>-->
<!--        <router-view/>-->
      </el-carousel-item>
    </el-carousel>
  </div>
   <div style="text-align: center" v-bind:style="{ fontSize: dynamicFontSize + 'px', color: 'green' }">智慧医疗项目</div>

  <div class="form-center">
    <el-form :model="loginRequest" status-icon   label-width="100px" class="demo-ruleForm">
      <span>医生13524082640</span>
      <span>院长18702516765</span>
      <span>患者15083286714</span>
      <el-form-item label="手机号">
        <el-input type="password" v-model="loginRequest.phone" class="custom-height-input"></el-input>
      </el-form-item>
      <el-form-item label="密码" style="right: 200px">
        <el-input type="password" v-model="loginRequest.password" class="custom-height-input"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
      </el-form-item>
    </el-form>
  </div>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import axios  from "axios";
import {textColor} from "friendly-errors-webpack-plugin/src/utils/colors";
  export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        loginRequest:{
          phone:'',
          password:''
        },
        dynamicFontSize:55,


      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      textColor,
      submitForm(){
           axios.post('/api/auth/login',this.loginRequest).then(
             res=>{
               if (res.data.code==200){
                 window.sessionStorage.setItem('token',res.data.data.token)
                 if (res.data.data.role==1 || res.data.data.role==2){
                   this.$router.push('/manager')
                 }
                 if (  res.data.data.role==3 || res.data.data.role==4||res.data.data.role==5||res.data.data.role==6){
                   this.$message.success("医生登陆成功")
                   this.$router.push('/doctor')
                 }
                 if (res.data.data.role==7){
                   this.$message.success("患者登陆成功")
                   this.$router.push('/community')
                 }
               }else {
                 this.$message.error(res.data.msg)

               }




             }

           )
      }


    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>
.form-center {
  display: flex;
  justify-content: center;
}

.form {
  text-align: center;
  margin: auto;
}
.custom-height-input {
  height: 40px;
  width: 200px;
  margin-left: 30px;
}
</style>
